﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>时尚衣橱购物商城</title>
    <meta name="description" content="Default Description">
    <meta name="keywords" content="E-commerce" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.png">
    <!-- Google Font css -->
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet"> 

    <!-- mobile menu css -->
    <link rel="stylesheet" href="/css/meanmenu.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="/css/animate.css">
    <!-- nivo slider css -->
    <link rel="stylesheet" href="/css/nivo-slider.css">
    <!-- owl carousel css -->
    <link rel="stylesheet" href="/css/owl.carousel.min.css">
    <!-- slick css -->
   <link rel="stylesheet" href="/css/slick.css">
    <!-- price slider css -->
    <link rel="stylesheet" href="/css/jquery-ui.min.css">
    <!-- fontawesome css -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
     <!-- fancybox css -->
    <link rel="stylesheet" href="/css/jquery.fancybox.css">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- default css  -->
    <link rel="stylesheet" href="/css/default.css">
    <!-- style css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/shortcode/header.css">
    <link rel="stylesheet" href="/css/shortcode/service.css">
    <link rel="stylesheet" href="/css/shortcode/product.css">
    <link rel="stylesheet" href="/css/shortcode/slider.css">
    <link rel="stylesheet" href="/css/shortcode/parallax.css">
    <link rel="stylesheet" href="/css/shortcode/login.css">
    <link rel="stylesheet" href="/css/shortcode/subscribe.css">
    <link rel="stylesheet" href="/css/shortcode/footer.css">
    <!-- modernizr js -->
    <script src="/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>

    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header>
            <!-- Kiosk Header Top Start -->
            <div class="kiosk-header-top">
                <div class="container">
                    <div class="row">
                        <!-- Header Top left Start -->                        
                        <div class="col-lg-6 col-md-12 d-center">
                            <div class="kiosk-header-top-left">
                                <i class="fa fa-phone"></i>中软国际: 400-183-1066
                            </div>                        
                        </div>
                        <!-- Header Top Right Start -->                                       
                        <div class="col-lg-6 col-md-12">
                            <div class="kiosk-header-top-right">
                                <div class="search-box-view">
                                    <form action="#">
                                        <input type="text" class="email" placeholder="Search Your Product" name="product">
                                        <button type="submit" class="submit"></button>
                                    </form>
                                </div>
                                <!-- Header-list-menu End -->
                            </div>
                        </div>
                        <!-- Header Top Right End -->
                    </div>
                </div>
                <!-- Container End -->
            </div>
            <!-- Header Top End -->
            <!-- Kiosk Header Bottom Start -->
          
            <div th:include="top :: topFragment"></div>
            <!-- Header Bottom End -->
        </header>
        <!-- Header Area End --> 
        <!-- Breadcrumb Start -->
<!--        中间注释-->
<!--        <div class="breadcrumb-area ptb-60 ptb-sm-30">-->
<!--            <div class="container">-->
<!--                <div class="breadcrumb">-->
<!--                    <ul>-->
<!--                        <li><a href="index.html">Home</a></li>-->
<!--                        <li class="active"><a href="login.html">Login</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; Container End &ndash;&gt;-->
<!--        </div>-->
        <!-- Breadcrumb End -->
        <!-- LogIn Page Start -->
        <script>
            function checkLoginForm(){
                if ($("#user_name").val()==""){
                    $("#user_nameSpan").html("账户名不能为空");
                    return;
                }
                if ($("#upwd").val()==""){
                    $("#upwdSpan").html("密码不能为空");
                    return;
                }
                $("#loginUser").submit();
            }
            function focusUserName(){
                $("#user_nameSpan").html("");
            }
            function focusUpwd(){
                $("#upwdSpan").html("");
            }
        </script>
        <div class="log-in ptb-70">
            <div class="container">
                <div class="row">
                    <!-- New Customer Start -->
                    <div class="col-sm-6">
                        <div class="well">
                            <div class="kiosk-login">
                                <h3 class="mb-10">请登录您的账户</h3>
<!--                                <p class="mb-10"><strong>欢迎您</strong></p>-->
                                <form action="/toSingIn" method="post" id="loginUser">
                                    <div class="form-group">
                                        <label class="control-label">账户名</label>
                                        <input onfocus="focusUserName()" type="text" name="user_name" placeholder="账户名" id="user_name" class="form-control">
                                        <span id="user_nameSpan" style="color: red"></span>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">密码</label>
                                        <input onfocus="focusUpwd()" type="text" name="upwd" placeholder="密码" id="upwd" class="form-control">
                                        <span id="upwdSpan" style="color: red"></span>
                                        <span style="color: red;" th:text="${msg}"></span>
                                    </div>
                                    <input type="button" value="登录" class="kiosk-login-btn" onclick="checkLoginForm()"></p>
                                    <span class="sign__text">若没有账号，请先注册</span></p>
                                    <span class="kiosk-login-btn"><a href="/loginup" style="color: white">立即注册</a></span>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- New Customer End -->
                    <!-- Login Area Start -->

                    <!-- Login Area End -->
                </div>
                <!-- Row End -->
            </div>
            <!-- Container End -->
        </div>
        <!-- LogIn Page End -->
        <!-- newsletter Start -->
        <div th:include="lop :: topFragment"></div>
        <!-- newsletter end -->
        <!-- Footer Start -->
        <!-- Footer End -->
    </div>
    <!-- Wrapper End -->
    <!-- jquery 3.12.4 -->
    <script src="/js/vendor/jquery-1.12.4.min.js"></script>
    <!-- mobile menu js  -->
    <script src="/js/jquery.meanmenu.min.js"></script>
    <!-- scroll-up js -->
    <script src="/js/jquery.scrollUp.js"></script>
    <!-- owl-carousel js -->
    <script src="/js/owl.carousel.min.js"></script>
    <!-- slick js -->
    <script src="/js/slick.min.js"></script>
    <!-- wow js -->
    <script src="/js/wow.min.js"></script>
    <!-- price slider js -->
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/jquery.countdown.min.js"></script>
    <!-- nivo slider js -->
    <script src="/js/jquery.nivo.slider.js"></script>
    <!-- fancybox js -->
    <script src="/js/jquery.fancybox.min.js"></script>
    <!-- bootstrap -->
    <script src="/js/bootstrap.min.js"></script>
    <!-- popper -->
    <script src="/js/popper.js"></script>
    <!-- plugins -->
    <script src="/js/plugins.js"></script>
    <!-- stellar -->
    <script src="/js/jquery.stellar.min.js"></script>
    <script src="/js/parallax.js"></script>
    <!-- main js -->
    <script src="/js/main.js"></script>
</body>
</html>
